import { Button, Modal, TextField, Icon, ChoiceList } from "@shopify/polaris";
import { DeleteMinor, AddMajor } from "@shopify/polaris-icons";
import { useState, useCallback } from "react";
import styled from "./Genggailianxiren.module.less";

interface ValueChildren {
  number: string;
  YSgs: string;
}
interface Props {
  active: boolean;
  setActive: (value: boolean) => void;
}

function ModalExample({ active, setActive }: Props) {
  //

  const handleChange = useCallback(() => setActive(!active), [active]);

  //   const activator = <Button onClick={handleChange}>Open</Button>;

  const [value, setValue] = useState([
    {
      number: "",
      YSgs: "",
    },
  ]);

  //MZ
  const [selectedMZ, setSelectedMZ] = useState<string[]>(["Rustic"]);

  const handleChangeMZ = useCallback(
    (value: string[]) => setSelectedMZ(value),
    []
  );
  //XS
  const [selectedXS, setSelectedXS] = useState<string[]>(["Rustic"]);

  const handleChangeXS = useCallback(
    (value: string[]) => setSelectedXS(value),
    []
  );
  //YX
  const [selectedYX, setSelectedYX] = useState<string[]>(["lend@vip.qq.com"]);

  const handleChangeYX = useCallback(
    (value: string[]) => setSelectedYX(value),
    []
  );
  //MRDZ
  const [selectedMRDZ, setSelectedMRDZ] = useState<string[]>(["optional"]);

  const handleChangeMRDZ = useCallback(
    (value: string[]) => setSelectedMRDZ(value),
    []
  );

  return (
    <Modal
      //   activator={activator}
      open={active}
      noScroll
      titleHidden
      onClose={handleChange}
      title=""
    >
      <div
        style={{
          color: "#303030",
          fontSize: "14px",
          padding: "16px",
          fontWeight: "600",
          height: "52px",
          backgroundColor: "#F3F3F3",
          borderRadius: "20px 20px 0 0",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          zIndex: "999999999999999999",
        }}
      >
        <div>更改联系信息</div>
      </div>
      <div className={styled.CHXPO}>
        <div>
          选择被合并的客户的联系信息。未被选择的信息将被丢弃并且无法恢复。
        </div>
        <div>
          <div className={styled.afagaw}>名字</div>
          <ChoiceList
            title=""
            choices={[
              {
                label: (
                  <div>
                    <div>aMalambri</div>
                  </div>
                ),
                value: "Malambri",
              },
              {
                label: (
                  <div>
                    <div>Rustic</div>
                  </div>
                ),
                value: "Rustic",
              },
            ]}
            selected={selectedMZ}
            onChange={handleChangeMZ}
          />
        </div>
        <div>
          <div className={styled.afagaw}>姓氏</div>
          <ChoiceList
            title=""
            choices={[
              { label: "Jessica", value: "Jessica" },
              { label: "Rustic", value: "Rustic" },
            ]}
            selected={selectedXS}
            onChange={handleChangeXS}
          />
        </div>
        <div>
          <div className={styled.afagaw}>邮箱</div>
          <ChoiceList
            title=""
            choices={[
              {
                label: "lendaver@vip.qq.com 没有经典账户 已订阅电子邮件",
                value: "lendaver@vip.qq.com",
              },
              {
                label: "lend@vip.qq.com 没有经典账户 已订阅电子邮件",
                value: "lend@vip.qq.com",
              },
            ]}
            selected={selectedYX}
            onChange={handleChangeYX}
          />
        </div>
        <div>
          <div className={styled.afagaw}>默认地址</div>
          <ChoiceList
            title=""
            choices={[
              {
                label: (
                  <div>
                    <div>Malambri Jessica</div>
                    <div>2006 Indiana Avenue</div>
                    <div>NEW ALBANY R3W 1N2</div>
                    <div>加拿大</div>
                  </div>
                ),
                value: "hidden",
              },
              {
                label: (
                  <div>
                    <div>Shaojie Shen</div>
                    <div>南京市秦淮区科巷一号</div>
                    <div>南京</div>
                    <div>伯利兹</div>
                  </div>
                ),
                value: "optional",
              },
            ]}
            selected={selectedMRDZ}
            onChange={handleChangeMRDZ}
          />
        </div>
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "end",
          alignItems: "center",
          padding: "16px",
        }}
      >
        {/* <div>
          <Button
            size="slim"
            onClick={() => {
              setActive(false);
            }}
          >
            取消
          </Button>
        </div> */}
        <div style={{ marginLeft: "10px" }}>
          <Button size="slim" primary>
            保存
          </Button>
        </div>
      </div>
    </Modal>
  );
}

export default ModalExample;
